<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <eHeader :permission="permission" />
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="toTree(crud.data)" row-key="menuId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="名称" width="220px" />

      <el-table-column prop="icon" label="图标" align="center" width="100px">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        width="150px"
        label="类型"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNum"
        header-align="center"
        align="center"
        label="排序"
        width="100px"
      />
      <el-table-column
        prop="hidden"
        header-align="center"
        align="center"
        label="是否隐藏"
        width="80px"
      >
        <template slot-scope="scope">
          {{ scope.row.hidden?'是':'否' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="component"
        header-align="center"
        align="center"
        label="组件"
        width="220px"
      />
      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        label="路径"
        width="220px"
      />
      <el-table-column
        prop="perms"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        label="授权标识"
      />

      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['sys:menu:update','sys:menu:delete'])"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
          />
        </template>
      </el-table-column>
    </el-table>

    <!--表单渲染-->
    <eForm />
  </div>
</template>

<script>
import crudMenu from '@/api/sys/menu'
import eHeader from './module/header'
import eForm from './module/form'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import { list_to_tree } from '@/utils'
export default {
  name: 'Menu',
  components: { eHeader, eForm, crudOperation, udOperation },
  cruds() {
    return CRUD({
      title: '菜单',
      url: 'sys/menu/list',
      crudMethod: { ...crudMenu },
      idField: "menuId",

    })
  },
  mixins: [presenter()],

  data() {
    return {
      permission: {
        add: ["sys:menu:save"],
        edit: ["sys:menu:update"],
        del: ["sys:menu:delete"]
      }

    }
  },

  created() {
    this.crud.optShow = {
      add: true,
      edit: true,
      del: false,
      download: false,
      reset: true,
    }
  },
  methods: {

    toTree(data) {
      return list_to_tree(data, 'menuId');
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
